<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Insert title here</title>
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/assets/css/style.css" />
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/assets/jquery-easyui-1.4.3/themes/default/easyui.css" />
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/assets/jquery-easyui-1.4.3/themes/icon.css" />
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/assets/css/easyui.icon.css" />
		<script type="text/javascript" src="${pageContext.request.contextPath }/assets/jquery-easyui-1.4.3/jquery.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/assets/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/assets/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/assets/jquery.js/jquery.json.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/assets/jquery.js/jquery.fw.ext.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/jquery.form.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/assets/easyui.js/easyui.ext.js"></script>
		<!-- <script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/menu.js"></script> -->
		<script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/message.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/MD5.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/moment.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/zh-cn.js"></script>
    </head>
    <body>
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'north',split:true,border:false" style="height:80px;">
                <form id="searchForm">
                    <table>
                        <tr>
                            <td><a id="btn_add" class="easyui-linkbutton" data-options="group:'g1',iconCls:'icon-add'">添加</a></td>
                            <td><a id="btn_dele" class="easyui-linkbutton" data-options="group:'g1',iconCls:'icon-remove'">删除</a></td>
                            <td><a onclick="grid.datagrid('reload');" href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'ext-icon-arrow_refresh'">刷新</a></td>
                        </tr>
                    </table>
                    <table>
                        <tr>
                            <td>用户名称</td>
                            <td><input name="user_nameSch" class="textbox" style="width: 120px; height: 22px;" /></td>
                            <td>创建时间</td>
                            <td><input name="createdStartSch" class="easyui-datebox" style="width: 100px" />
                                -
                                <input name="createdEndSch" class="easyui-datebox" style="width: 100px" />
                            </td>
                            <td><a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'ext-icon-zoom',plain:true" onclick="grid.datagrid('load',fw.serializeObject($('#searchForm')));">过滤</a> <a href="javascript:void(0);" id="reset_searchFilter" class="easyui-linkbutton" data-options="iconCls:'ext-icon-zoom_out',plain:true" onclick="$('#searchForm input').val('');grid.datagrid('load',{});">重置过滤</a></td>
                        </tr>
                    </table>
                </form>
            </div>
            <div data-options="region:'center',border:false">
                <table id="grid">
                </table>
            </div>
            <div data-options="region:'east',split:true,border:false" style="width: 50%; padding: 5px;">
                <form id="form" name="form" method="post" class="form" enctype="multipart/form-data" action="${pageContext.request.contextPath}/addRecommand.do">
                    <fieldset>
                        <legend> 基本信息--<span id="operateMode_title">添加模式</span> </legend>
                        <table class="table">
                            <tbody>
                                <tr>
                                    <th>ID</th>
                                    <td><input id="id" readonly="readonly" name="id" class="textbox"  value=0  style="height: 22px; width:100px; background:#eee;" /></td>
                                </tr>
                                <tr>
                                    <th>标题</th>
                                    <td><input id="title" name="title" class="textbox easyui-validatebox" required="true"   style="height: 22px;" /></td>
                                </tr>
                                 <tr>
                                    <th>内容</th>
                                    <td><textarea cols="100" id="content" name="content" class="textbox easyui-validatebox" required="true"  style="width:100%;height: 200px;line-height:22px;" ></textarea></td>
                                </tr>
                                <tr>
                                    <th>缩略图</th>
                                    <td>
                                    	<input id="sImgUrl" name="sImgUrl" class="textbox"      style="height: 22px; width:400px;display:none;" />
                                    	<input id="file0" name="filePic0" class="textbox easyui-validatebox" required="true"   style="height: 22px;margin:5px 0px;width:200px;" />
                                    	<input id="picUpLoad0" type="file" name="file0" style="display:none;" onchange="setPicName(0)" />
                                    	<input id="change0" name="change0" value="-1" style="display:none">
                                    	<a onclick="uploaderFun(0);"id="openFile" class="easyui-linkbutton" >打开</a><br />
                                    </td>
                                </tr>
                                <tr>
                                    <th>介绍图</th>
                                    <td>
                                    	<input id="mImgUrl" name="mImgUrl" class="textbox"      style="height: 22px;width:400px;display:none;" />
                                    	<input id="file1" name="filePic1" class="textbox"  style="height: 22px;margin:5px 0px;width:200px;" />                                    	
                                    	<input id="picUpLoad1" type="file" name="file1" style="display:none;" onchange="setPicName(1)" />
                                    	<input id="change1" name="change1" value="-1" style="display:none">
                                    	<a onclick="uploaderFun(1);"id="openFile" class="easyui-linkbutton">打开</a>
                                    	<a onclick="clearFile(1)" id="clearFile" class="easyui-linkbutton">清除</a><br />
                                    </td>
                                </tr>
                                <tr>
                                    <th>链接地址</th>
                                    <td><input id="linkUrl" name="linkUrl" class="textbox"      style="height: 22px;" /></td>
                                </tr>
                                <tr>
                                	 <th>添加时间</th>
                                     <td>
                                        <input name="createdTime" class="easyui-datetimebox" style="width: 180px;" />
                                     </td>
                                </tr> 
                                <tr>
                                    <th>序号</th>
                                    <td><input id="sortId" name="sortId"
                                            class="easyui-validatebox easyui-numberspinner"
                                            data-options="min:0,max:100,required:true" value="0"   style="width: 50px;" />
                                    </td>
                                </tr> 
                                <tr>
                                    <th>操作</th>
                                	<td><a id="operateMode_submit" class="easyui-linkbutton" data-options="iconCls:'icon-save'">确定</a> <a id="operateMode_reset" class="easyui-linkbutton" data-options="iconCls:'icon-reload'">取消</a></td>
                                </tr>
                            </tbody>
                        </table>
                    </fieldset>
                </form>
            </div>
        </div>
        <script type="text/javascript">
            $(function() {
                var gird;
                grid=$('#grid').datagrid({
                    fit:true,
                    border : false,
                    collapsible : false,
                    rownumbers : true,
                    pagination : true,
                    singleSelect : true,
                    rownumbers : true,
                    url:'${pageContext.request.contextPath }/listRecommand.do',
                    columns:[[
            		                       
            			{ sortable:true,field:'id',title:'ID'}
            		                       
            			//,{ sortable:true,field:'sImgUrl',title:'缩略图路径'}
            		                       
            			//,{ sortable:true,field:'mImgUrl',title:'原图路径'}
            		                       
            			,{ sortable:true,field:'title',title:'标题',width:300}
            		                       
            			//,{ sortable:true,field:'linkUrl',title:'linkUrl'}
            			
            			,{ sortable:true,field:'sortId',title:'序号'}
            		                       
            			,{ sortable:true,field:'createdTime',title:'创建时间'}      
            			
            		                    ]],
                    onLoadSuccess : function(data) {
                        $('.iconImg').attr('src', fw.pixel_0);
                    },
                    onClickRow : function(index, row) {
                    	$("input[id^=change]").val(-1);
                    	$('input[id^=file]').val('');
                        $("#form").form("load", row);
                        var sImgUrl = row.sImgUrl;
                        $("#file0").val(sImgUrl.substring(sImgUrl.lastIndexOf("/")+1));
                        var mImgUrl = row.mImgUrl;
                        $("#file1").val(mImgUrl.substring(mImgUrl.lastIndexOf("/")+1));
                        $("#operateMode_title").html("修改模式");
                    }
                });
              //添加按钮事件
                $("#btn_add").click(function() {
                    $("#operateMode_title").html("添加模式");
                    $('#grid').datagrid("unselectAll");
                    $("#id").attr("value", 0);
                    $("#form").form("reset");
                })
            
                //删除按钮事件
                $("#btn_dele").click(function() {
                    var rows = $('#grid').datagrid('getSelections');
                    if (rows <= 0) {
                        $.messager.show({
                            title : message.title.normal,
                            msg : message.grid_select,
                            timeout : message.timeout,
                            showType : message.showType
                        });
                    } else {
                        $.messager.confirm(message.title.askTitle, message.dele_comfirm, function(r) {
                            if (r) {
                                var idValue = $("#form input[name='id']").val();
                                $.post("${pageContext.request.contextPath }/delRecommand.do", {
                                    id : idValue
                                }, function(result) {
                                    if (result.success) {
                                        $.messager.show({
                                            title : message.title.normal,
                                            msg : message.dele_success,
                                            timeout : message.timeout,
                                            showType : message.showType
                                        });
                                        grid.datagrid('reload');
                                    } else {
                                        $.messager.show({
                                            title : message.title.normal,
                                            msg : message.dele_fail,
                                            timeout : message.timeout,
                                            showType : message.showType
                                        });
                                    }
                                }, 'json');
                                $("#btn_add").click();
                            }
                        });
                    }
                })
            
                //确定按钮事件
                $("#operateMode_submit").click(function() {
                    var idValue = $("#form input[name='id']").val();
                    if ($('#form').form('validate')) {
                        if (idValue > 0) {   
                          //修改
                       		$("#form").attr("action","${pageContext.request.contextPath}/updateRecommand.do").ajaxSubmit(function(result) {
                           		result = JSON.parse(result);
                           		if(result.success){
                           			$.messager.show({
                                        title : message.title.normal,
                                        msg : message.update_success,
                                        timeout : message.timeout,
                                        showType : message.showType
                                    });
            					
                           		 	grid.datagrid("reload");
                                 
                           		 	//重新加载信息
                                    $("#form").form("load", "${pageContext.request.contextPath }/getRecommandById.do?id=" + idValue);
                                    $("input[id^=change]").val(-1);
                           		}else{
                                   	$.messager.show({
                                           title : message.title.normal,
                                           msg : message.update_fail,
                                           timeout : message.timeout,
                                           showType : message.showType
                                       });
                                   }
                           	});
                        } else {
                            if(idValue.trim().length == 0){
                                $.messager.show({
                                    title : message.title.normal,
                                    msg : message.add_button_click,
                                    timeout : message.timeout,
                                    showType : message.showType
                                });
                            }else{
                            	/**
                                //新增
                                $.post("${pageContext.request.contextPath }/addRecommand.do", fw.serializeObject($('form')), function(result) {
                                    if (result.success) {
                                        $.messager.show({
                                            title : message.title.normal,
                                            msg : message.add_success,
                                            timeout : message.timeout,
                                            showType : message.showType
                                        });
                                        grid.datagrid("reload");
                                        $("#form").form("reset");
                                    }
                                }, 'json');**/
                                
                                $("#form").attr("action","${pageContext.request.contextPath}/addRecommand.do").ajaxSubmit(function(result) {
                            		result = JSON.parse(result);
                            		if(result.success){
                            			 $.messager.show({
                                             title : message.title.normal,
                                             msg : message.add_success,
                                             timeout : message.timeout,
                                             showType : message.showType
                                         });
                                         grid.datagrid("reload");
                                         $("#form").form("reset");
                            		}else{
                                    	$.messager.show({
                                            title : message.title.normal,
                                            msg : message.add_fail,
                                            timeout : message.timeout,
                                            showType : message.showType
                                        });
                                    }
                            		$("input[id^=change]").val(-1);
                            	});
                            }
                        }
                    }
                })
                //重置按钮操作
                $("#operateMode_reset").click(function() {
                    var idValue = $("#form input[name='id']").val();
                    if (idValue > 0) {
                        $("#form").form("load","${pageContext.request.contextPath }/getRecommandById.do?id=" + idValue);
                    } else {
                        $("#form").form("reset");
                    }
                })
            });
            
            function uploaderFun(index) {
        	    $("#picUpLoad"+index).trigger("click");
        	}
            
            function setPicName(index){
            	var picName = $("#picUpLoad"+index).val();
            	picName = picName.substring(picName.lastIndexOf("\\")+1);
            	$("#file"+index).val(picName);
            	$("#file"+index).trigger("click");
            	var idValue = $("#form input[name='id']").val();
        	    if(idValue>0){
            		//设置文件修改
                	$("#change"+index).val(1);
            	}
            }
            
            function clearFile(index){
            	$("#file"+index).val("");
            	//设置文件清除
            	$("#change"+index).val(0);
            }
        </script>
    </body>
</html>